<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品列表</title>
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/nav.css">
    <link href="${applicationScope.basePath}/css/font-awesome.css" rel="stylesheet"/>
    <link href="${applicationScope.basePath}/css/myPage.css" rel="stylesheet"/>
    <script type="text/javascript" src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <style>
        table {
            width: 200px;
            table-layout: fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
        }

        td {
            width: 100%;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        }

        th {
            text-align: center;
        }
    </style>
</head>
<body>
<jsp:include page="header.jsp" flush="true"/>
<div class="row" style="height: 100%;margin-top: -21px;">
    <div class="col-xs-2" style="height: 100%;margin-left: 0;">
        <div class="nav nav-pills nav-stacked">
            <div class="nav-top">
                <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="${applicationScope.basePath}/images/mini.png"></div>
            </div>
            <ul>
                <li class="nav-item"><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/main"><i
                        class="icon icon-home"></i><span>首页</span></a></li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-group"></i><span>用户管理</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/userpage/1"><span>&emsp;&emsp;用户列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-signal"></i><span>商品管理</span> </a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/goodspage/1"><span>&emsp;&emsp;商品列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i class="icon icon-th"></i><span>订单管理</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/orderspage/1"><span>&emsp;&emsp;订单列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-inbox"></i><span>钱包管理</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/purse/page/1"><span>&emsp;&emsp;钱包列表</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/withdrawals/page/1"><span>&emsp;&emsp;提现列表</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/recharge/page/1"><span>&emsp;&emsp;充值列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-fullscreen"></i><span>系统设置</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/sys"><span>&emsp;&emsp;发布信息</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/password"><span>&emsp;&emsp;修改密码</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/ipblack"><span>&emsp;&emsp;黑名单IP</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-xs-10">
        <ol class="breadcrumb" style="margin-top: 15px;">
            <li><a href="#"><i class="icon-home"></i>首页</a></li>
            <li class="active">商品列表</li>
        </ol>
        <div class="container">
            <!--搜索栏-->
            <form id="selectForm" class="form-inline row" action="${applicationScope.basePath}/admin/goods/select/1"
                  method="get">
                <div class="col-xs-10">
                    <div class="form-group">
                        <label for="goodsName">名称</label>
                        <input type="text" class="form-control" id="goodsName" name="name" value="${preSelect.name}"
                               placeholder="模糊查询">
                    </div>
                    <div class="form-group">
                        <label for="catelog_id">类别：</label><select class="form-control" name="catelog_id"
                                                                   id="catelog_id">
                        <option value="" selected="selected">请选择商品类别</option>
                        <option value="1">闲置数码</option>
                        <option value="2">代步工具</option>
                        <option value="3">电器日用</option>
                        <option value="4">教材资料</option>
                        <option value="5">美妆衣物</option>
                        <option value="6">运动棋牌</option>
                        <option value="7">其他</option>
                    </select>
                    </div>
                    <div class="form-group">
                        <label for="status">状态：</label><select class="form-control" name="status"
                                                               id="status">
                        <option value="" selected="selected">请选择商品状态</option>
                        <option value="0">下架</option>
                        <option value="1">在售</option>
                    </select>
                    </div>
                    <div class="form-group">
                        <label for="publishFlag">上架时间：</label><select class="form-control" name="publishFlag"
                                                                      id="publishFlag">
                        <option value="" selected="selected">请选择上架时间</option>
                        <option value="1">今天</option>
                        <option value="2">昨天</option>
                        <option value="3">7天之内</option>
                        <option value="4">30天之内</option>
                        <option value="5">本月</option>
                        <option value="6">上个月</option>
                        <option value="7">今年</option>
                    </select>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="pull-right">
                        <button class="btn btn-success btn-sm" type="submit">查找</button>
                        <button class="btn btn-danger btn-sm" type="button"
                                id="deleteGoodsButton">删除
                        </button>
                    </div>
                </div>
            </form>
            <hr/>
            <div class="panel panel-default">
                <div class="panel-heading">商品列表</div>
                <!--表格显示-->
                <table class="table table-bordered table-hover text-center" style="">
                    <thead>
                    <tr>
                        <th style="width: 50px;"><input type="checkbox" id="selectAllButton"></th>
                        <th style="width: 80px;">ID</th>
                        <th>名称</th>
                        <th>类别</th>
                        <th>价格</th>
                        <th>创建时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${info.list}" varStatus="vs" var="item">
                        <tr>
                            <td><input type="checkbox" name="itemIds" value="${item.id}"></td>
                            <td>${(info.pageNum > 0 ? info.pageNum - 1 : 0) * 10 + vs.count}</td>
                            <td style="width: 200px;" title="${item.name}">${item.name}</td>
                            <td>${item.catelogName}</td>
                            <td>￥${item.price}</td>
                            <td>${item.publish_time}</td>
                            <td>
                                <c:if test="${item.status == 1}">
                                    <span style="background-color:#3395ff;color: white;">在售</span>
                                </c:if>
                                <c:if test="${item.status == 0}">
                                    <span style="background-color:red;color: white;">下架</span>
                                </c:if>
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm" onclick="doView(${item.id});">查看
                                </button>
                                <button type="button" class="btn btn-info btn-sm" onclick="doEdit(${item.id});">修改
                                </button>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
            <div style="text-align: right">
                <div class="pagination">
                    <ul>
                        <li class="active"><a>共${info.pages}页,${info.total}条记录</a></li>
                        <c:if test="${preSelect == null}">
                            <li><a
                                    href="${applicationScope.basePath}/admin/goodspage/${info.prePage > 1 ? info.prePage : 1}">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${preSelect != null}">
                            <li><a
                                    href="#" onclick="return selectBy(1);">上一页</a>
                            </li>
                        </c:if>
                        <li class="active"><a>第${info.pageNum <= 0 ? 1 : info.pageNum}页</a></li>
                        <c:if test="${preSelect == null}">
                            <li><a
                                    href="${applicationScope.basePath}/admin/goodspage/${info.nextPage == 0 ? info.pages : info.nextPage}">下一页</a>
                            </li>
                        </c:if>
                        <c:if test="${preSelect != null}">
                            <li><a onclick="return selectBy(2);"
                                   href="#">下一页</a>
                            </li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<br/>
<br/>
<div class="footerpanel">
    © 二手交易系统后台 2020
</div>

<!--修改  模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">修改商品信息</h4>
            </div>
            <div class="modal-body" style="">
                <form class="form-horizontal" id="myeditform1" name="myform">
                    <input hidden="hidden" name="id" id="goodsId" value="">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="goods_name1" name="name"
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">类别:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="catelog_id" id="catelog" style="margin-top: 8px;">
                                <option value="1">闲置数码</option>
                                <option value="2">代步工具</option>
                                <option value="3">电器日用</option>
                                <option value="4">教材资料</option>
                                <option value="5">美妆衣物</option>
                                <option value="6">运动棋牌</option>
                                <option value="7">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">原价(￥):</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="real_price1" name="real_price"
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">售价(￥):</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="price1" name="price"
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">数量:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="number1" name="number"
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">描述:</label>
                        <div class="col-sm-8">
					<textarea rows="3" cols="20" id="describle1" name="describle" style="margin-top: 8px;width:365px">
					</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">状态:</label>
                        <div class="col-sm-8">
                            <select id="goods_status" name="status" style="margin-top: 8px;">
                                <option value="0">下架</option>
                                <option value="1">上架</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">发布时间:</label>
                        <div class="col-sm-8 form-inline">
                            <input type="datetime-local" id="publish_time1" class="form-control" name="publish_time"
                                   style="margin-top: 8px;"/>
                            <input type="text" class="form-control" value="" readonly name="_publish_time"
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doSave();">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 查看 模态框（Modal） -->
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">查看商品信息</h4>
            </div>
            <div class="modal-body" style="">
                <form class="form-horizontal" id="myviewform2" name="myform">
                    <input type="hidden" id="id" name="id" value=""/>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name2" name="name" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">类别:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="catelogName" name="catelogName" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">原价:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="my_price" name="real_price" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">售价:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="my_realPrice" name="price" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">数量:</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="number2" name="number" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">描述:</label>
                        <div class="col-sm-8">
					<textarea rows="3" cols="20" id="my_describle" name="describle" readonly
                              style="margin-top: 8px;width:365px">
					</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">状态:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="status2" name="status" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">创建时间:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="publish_time2" name="publish_time" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">下架时间:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="end_time" name="end_time" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript" src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
<script type="text/javascript" src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${applicationScope.basePath}/js/nav.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        let flag = "${preSelect != null ? preSelect.publishFlag : ''}";
        let status = "${preSelect != null ? preSelect.status : ''}";
        let type = "${preSelect != null ? preSelect.catelog_id : ''}";
        let $flag = $("#publishFlag").children();
        let $status = $("#status").children();
        let $type = $("#catelog_id").children();
        for (let i = 0; i < $flag.length; i++) {
            if (i <= 2) {
                if ($status[i].value === status) {
                    $($status[i]).attr("selected", true);
                } else {
                    $($status[i]).attr("selected", false);
                }
            }
            if ($flag[i].value === flag) {
                $($flag[i]).attr("selected", true);
            } else {
                $($flag[i]).attr("selected", false);
            }
            if ($type[i].value === type) {
                $($type[i]).attr("selected", true);
            } else {
                $($type[i]).attr("selected", false);
            }
        }
    });

    function selectBy(i) {
        let $form = $("#selectForm");
        if (i === 1) {
            $form.attr("action", "${applicationScope.basePath}/admin/goods/select/${info.prePage > 1 ? info.prePage : 1}");
        }
        if (i === 2) {
            $form.attr("action", "${applicationScope.basePath}/admin/goods/select/${info.nextPage == 0 ? info.pages : info.nextPage}");
        }
        $form.submit();
        return false;
    }

    $(function () {

        /*全选*/
        $("#selectAllButton").on("click", function () {
            let $inputs = $("input[name='itemIds']");
            if ($(this).prop("checked")) {
                // 全部选中
                for (let i = 0; i < $inputs.length; i++) {
                    $($inputs[i]).attr("checked", true);
                }
            } else {
                // 全部取消选中
                for (let i = 0; i < $inputs.length; i++) {
                    $($inputs[i]).attr("checked", false);
                }
            }
        });

        /*删除*/
        $("#deleteGoodsButton").on("click", function () {
            if (confirm("确定删除？")) {
                let $inputs = $("input[name='itemIds']");
                // 判断是否有一个选中
                let idList = [];
                let id;
                //查找选中的
                for (let i = 0; i < $inputs.length; i++) {
                    // 如果选中
                    if ($($inputs[i]).is(':checked')) {
                        id = $($inputs[i]).val();
                        idList.push(id);
                    }
                }
                if (idList.length > 0) {
                    alert(JSON.stringify(idList));
                    $.ajax({
                        url: '${applicationScope.basePath}/admin/goods',
                        type: 'DELETE',
                        data: JSON.stringify(idList),
                        dataType: 'json',
                        contentType: "application/json;charset=UTF-8",
                        success: function (data) {
                            if (data['flag']) {
                                alert("删除成功");
                                window.location.reload();
                            } else {
                                alert("删除失败");
                            }
                        },
                        error: function () {
                            alert('请求超时或系统出错!');
                        }
                    });
                } else {
                    alert("请至少选择一项");
                }
            }
        });
    });


    /* 查看 */
    function doView(id) {
        $.ajax({
            url: '${applicationScope.basePath}/admin/goods',
            type: 'GET',
            data: {id: id},
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function (json) {
                if (json) {
                    let $view = $('#myviewform2');
                    $view.find("input[name='name']").val(json.name);
                    $view.find("input[name='catelogName']").val(json.catelogName);
                    $view.find("input[name='price']").val("￥" + json.price);
                    $view.find("input[name='number']").val(json.number);
                    $view.find("input[name='real_price']").val("￥" + json.real_price);
                    $view.find("input[name='publish_time']").val(json.publish_time);
                    $view.find("input[name='end_time']").val(json.end_time);
                    $view.find("textarea[name='describle']").val(json.describle);
                    if (json.status === '1') {
                        $view.find("input[name='status']").val('在售');
                    } else {
                        $view.find("input[name='status']").val('下架');
                    }
                    $('#viewModal').modal('toggle');
                } else {
                    alert('请求超时或系统出错!');
                }
            },
            error: function () {
                alert('请求超时或系统出错!');
                $('#viewModal').modal('hide');
            }
        });
    }

    /* 修改 */
    function doEdit(id) {
        $.ajax({
            url: '${applicationScope.basePath}/admin/goods',
            type: 'GET',
            data: {id: id},
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function (json) {
                if (json) {
                    let $view = $('#myeditform1');
                    let $option = $("#catelog").children();
                    $view.find("input[name='id']").val(json["id"]);
                    $view.find("input[name='name']").val(json.name);
                    $view.find("input[name='price']").val(json.price);
                    $view.find("input[name='number']").val(json.number);
                    $view.find("input[name='real_price']").val(json.real_price);
                    $view.find("input[name='_publish_time']").val(json.publish_time);
                    $view.find("textarea[name='describle']").val(json.describle);
                    if (json.status == '1') {
                        $view.find("#goods_status option[value='1']").attr("selected", true);
                        $view.find("#goods_status option[value='0']").attr("selected", false);
                    } else {
                        $view.find("#goods_status option[value='1']").attr("selected", false);
                        $view.find("#goods_status option[value='0']").attr("selected", true);
                    }
                    for (let i = 0; i < $option.length; i++) {
                        if ($option[i].value == json.catelog_id) {
                            $($option[i]).attr("selected", true);
                        } else {
                            $($option[i]).attr("selected", false);
                        }
                    }
                    $('#editModal').modal('toggle');
                } else {
                    alert('请求超时或系统出错!');
                }
            },
            error: function () {
                alert('请求超时或系统出错!');
                $('#viewModal').modal('hide');
            }
        });
    }

    /* 保存 */
    function doSave() {
        // 序列化表单值
        let data = JSON.stringify($("#myeditform1").serializeJSON());
        $.ajax({
            url: '${applicationScope.basePath}/admin/goods',
            type: 'PUT',
            data: data,
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                if (data["flag"]) {
                    alert("修改成功");
                } else {
                    alert("修改失败")
                }
                $('#editModal').modal('toggle');
                location.reload();
            },
            error: function () {
                alert('请求超时或系统出错!');
                $('#editModal').modal('toggle');
            }
        });

    }

    /*清空模态框的数据*/
    $('#editModal').on('hidden.bs.modal', function () {
        $("#myeditform1").reset();
    });
    $('#viewModal').on('hidden.bs.modal', function () {
        $("#myviewform2").reset();
    });
</script>
</body>
</html>
